<template>
	<view class="page">
		<view class="top-box">
			<view class="left">
				<image class="title-img" src="../../static/image/baojiadan.png"></image>
				<view class="tips">获取本地最新报价， 包含各项费用明细</view>
				<view class="time-box" v-if="isTimeShow">
					<view class="time">{{expire_at}}</view>
				</view>
				<view v-if=" !isTimeShow"></view>
			</view>
			<view class="right">
				<image src="../../static/image/fangdajing.png"></image>
			</view>
		</view>
		<view class="white">
		
				<view class="select-item">
					<view class="brand-list">
							<view  :class="isActive == item.brand_id ? 'tab-item active': 'tab-item'" v-for="item in brand_list" :key="item.brand_id" @click="tabChange(item)">{{item.brand_name}}</view>
						
					</view>
					<view class="scroll-box">
						
						<scroll-view
							scroll-x="true"
							:class="carList.length > 3 ? 'scroll-list' : 'scroll-short'"
							:scroll-into-view="toView"
							:scroll-left="scrollLeft"
							>
							<block v-for="(val,index) in carList" :key="val.hid">
								<view class="car-item" :id="'sv'+val.hid" @click="checkItem(val)">
											<view class="img-title">
												<img :src="val.cover" alt="">
												<view class="title">{{val.name}}</view>
											</view>
											<view class="check" v-if="val.isSelected == 1">
												<img src="../../static/image/ok.png" alt="">
											</view>
										</view>
								</block>
								
						</scroll-view>
						
						<view class="all-car" @click="showCar" v-if="carList.length >3">
							<view class="all">全部车系</view>
							<img src="../../static/image/箭头.png" alt="">
						</view>
					</view>
					<view class="guding">
						<view class="item-jia" v-for="item in gudingList" :key="item.label">
							<view class="top-name">{{item.label}}</view>
							<view class="x">xxx</view>
						</view>
					</view>
					<view class="item">
						<view class="left">购车城市</view>
						
						<view class="middle">
							<picker title="选择城市" mode="multiSelector" range-key="name" :range="regionList" :value="provinceCityIndex" mask-style="background: #000; " @change="regionListChange" @cancel="cancelRegion" @columnchange="regionListColumnchange">
								<view class="picker-box" v-if="isLocation">
									{{ newProvinceCityList[provinceCityIndex[0]] ? newProvinceCityList[provinceCityIndex[0]].name : '请选择购车城市' }}
									{{ newProvinceCityList[provinceCityIndex[0]].citys ? newProvinceCityList[provinceCityIndex[0]].citys[provinceCityIndex[1]].name : '' }}
								</view>
								<view class="picker-box" v-if="!isLocation">
									{{provincename}}
								</view>
							</picker>
						</view>
						<view class="right"><img src="../../static/image/right.png" alt=""></view>
					</view>
					<view class="item" v-if="dea_is_show" @click="showModal">
						<view class="left">经销商</view>
						<view class="middle">{{dealerName}}</view>
						<view class="right"><img src="../../static/image/right.png" alt=""></view>
					</view>
					
					<view class="item" v-if="!isEmpower">
						<view class="left">手机号</view>
						
						<input name="input" class="middle" placeholder="请输入手机号" placeholder-style="color:#BEC0C4" v-model="phone" maxlength="11" type="number"  :clueType="clueType" @input="inputChange" ></input>
						<view class="right" v-if="phone == '' "><button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumbers">获取手机号</button></view>
					</view>
					<view class="item" v-if="!isShow">
						<view class="left">验证码</view>	
						<input class="middle" type="number" v-model="sms_code" placeholder="请输入验证码" placeholder-style="color:#BEC0C4"></input>
						<view class="right">
							<button class="btn" @click="getSMS" v-if="!isSMS">获取验证码</button>
							<button class="btn" @click="getSMS" v-if="isSMS">{{countdown}}s</button>
						</view>
					</view>
				</view>
				
				<view class="btn-box">
					<button class="btn-price" v-if="isEmpower"  open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"> 授权手机号领取报价单</button>
					<button class="btn-price" v-if="!isEmpower" @click="clickForm"> 立即领取报价单</button>
					<view class="tips-text">提交信息后可获取最新报价单，提交即视为同意<view style="color:#3075FE" @click="jumpAgreement">《隐私政策》</view></view>
				</view>
	
		
			
			<uni-popup ref="carpop"  mask-background-color="rgba(0,0,0,.4)" safe-area="true">
				<view class="dea-box">
					<view class="cancel-title">
						<view class="cancel" @click="closeModal">取消</view>
						<view class="title">选择车系</view>
					</view>
					<view class="list-box">
						<view class="list-item" v-for="(item, index) in carList" :key="item.hid" @click="selectCar(item, index)">
							<view class="title">{{item.name}}</view>
							<view class="address">
								
								<view class="distance">指导价：{{item.guide_price}}</view>
						
							</view>
							<uni-icons v-show="item.isSelected == 1" class="icon" type="checkmarkempty" size="20"></uni-icons>
						
						</view>
					</view>
				</view>
			</uni-popup>
			
			<uni-popup ref="popup"  mask-background-color="rgba(0,0,0,.4)" safe-area="true">
				<view class="dea-box">
					<view class="cancel-title">
						<view class="cancel" @click="closeModal">取消</view>
						<view class="title">选择经销商</view>
					</view>
					<view class="list-box">
						<view class="list-item" v-for="item in dealerList" :key="item.hid" @click="selectDealer(item)">
							<view class="title">{{item.name}}</view>
							<view class="address">
								
								<view class="distance" v-if="item.distance != ''">{{item.distance}} | {{item.address}}</view>
								<view class="distance" v-if="item.distance == ''">{{item.address}}</view>
						
							</view>
							<uni-icons v-show="item.isSelected == 1" class="icon" type="checkmarkempty" size="20"></uni-icons>
						
						</view>
					</view>
				</view>
			</uni-popup>
			
			<uni-popup type="center" ref="modalPopup" :mask-click="false">
				<view class="modal">
					<view class="title">温馨提示</view>
					<view class="content">领取成功，稍后会有工作人员与您联系！</view>
					<view class="btn" @click="jumpHome">知道了</view>
				</view>
			</uni-popup>
			
		</view>
		
		
		<view class="mask" v-if="networkConnected">
			<view class="net-box">
				<img mode="widthFix" src="../../static/image/qiu.jpg" alt="">
				<view class="text">抱歉，页面加载失败了...</view>
				<view class="btn" @click="reloading">重新加载</view>
			</view>
		</view>
	</view>
</template>

<script>
	const Api = require('../../utils/api.js');
	const request = require('../../utils/request.js');
	
	import {buryReport} from '../../utils/buryReport.js'
	import {deliverClickCallback} from '../../utils/deliverClickCallback.js'
	export default {
		data() {
			return {
				mount_log_hid: '',
				newProvinceCityList: [],
				regionList: [],
				provinceCityIndex: [0, 0],
				phone: '',
				province_id: '',
				city_id: '',
				carId: '',
				dealerId: '',
				dealerName: '请选择意向经销商',
				loc_lng: '',
				loc_lat: '',
				dealerList: [],
				code: '',
				countdown: 60,
				timeClock: null,
				isSMS: false,
				sms_code: '',
				cityName: '',
				provincenName: '',
				carHid: '',
				conversionTarget: 1,
				clueType: 1,
				text: '',
				isShow: true,
				phone_sign: '',
				isLocation: false,
				isEmpower: true,
				isClick: false,
				submitType: '',
				reqArgs: {},
				special_hid: '',
				carName: '',
				imageUrl: '',
				carList: [],
				dea_is_show: null,
				toView: '',
				isLoading: true,
				scrollLeft: '0',
				networkConnected: false,
				brand_list: [],
				isActive: '',
				gudingList: [
					{label: '落地价', value: '1' },
					{label: '裸车价', value: '2' },
					{label: '必要花费', value: '3' },
					{label: '商业保险', value: '4' }
				],
				brand_id: '',
				timeStamp: '',
				expire_at: '00:00:00',

				isTimeShow: false,
				provincename: '请选择购车城市',
				appIdNum: ''
			}
		},
		
	
		async onLoad(options) {
			
			
			//更换线索组件id
			const accountInfo =  uni.getEnvInfoSync()
			this.appIdNum = accountInfo.microapp.appId
			
			uni.showLoading({
				title:'加载中...'
			})
			console.log('网络监测')
			// 2g或没有网时
			let that = this
			uni.getNetworkType({
				success(res) {
					that.networkConnected = res.networkType == 'none' 
					if(res.networkType == 'none' ) {
						uni.hideLoading()
					}
				}
			})
						
			console.log(options, '领优惠')
			this.reqArgs = options
	
			this.getPageInfo()
			
			
			//倒计时
			this.timeStamp = options.expire_at
			this.countdownTime(this.timeStamp)
			
			this.phone = uni.getStorageSync('empower_phone')? uni.getStorageSync('empower_phone') : ''
			this.phone_sign = uni.getStorageSync('phone_sign')? uni.getStorageSync('phone_sign') : ''

			if(this.phone != '') {
				this.isEmpower = false
			}
			
			// 广告访问页面数据上报
			deliverClickCallback("page_view", this.reqArgs)

			setTimeout(() => {
				console.log(uni.getStorageSync('isNetwork'), '定时器')
				if(uni.getStorageSync('isNetwork')) {
					uni.hideLoading()
					this.networkConnected = true
				}
			}, 6000)

		},
		
		
		
		async onShow() {	
			tt.hideHomeButton()
		},

		
		methods: {
			//倒计时
			countdownTime(endTime){
				// 和当前时间做比较  当前时间大 不需要倒计时  相反
				
				const timer = setInterval(() => {
					const now = new Date().getTime();
					if(now < endTime) {
						this.isTimeShow = true
						const distance =  endTime - now
						
						let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
						hours = hours <10 ?'0'+hours: hours
						let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
						minutes = minutes <10 ?'0'+minutes: minutes
						let seconds = Math.floor((distance % (1000 * 60)) / 1000);
						seconds = seconds <10 ?'0'+seconds: seconds
						this.expire_at = hours +":" + minutes + ":" + seconds
					
					} else {
						this.isTimeShow = false
					}
				}, 1000)
				
			    
			},
			
			//配置详情
			getPageInfo() {
				request.http({
					url:Api.quotation_brand_list,
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
					},
					type: 'GET',
					data: {
						account_hid: this.reqArgs.account_hid
						//account_hid: '064a71c6b6d74070ad9c47c1e6401469'
					},
					 
				}).then(res => {
					// console.log(res, '333')
					console.log(res.data, '详情222')
					//品牌
					this.brand_list = res.data.list
					
					this.brand_id = res.data.list[0].brand_id
					
					this.isActive = res.data.list[0].brand_id
					
					this.mount_log_hid = res.data.list[0].styles[0].mount_log_hid
					this.special_hid = res.data.list[0].styles[0].special_hid
					//车
					this.carHid = res.data.list[0].styles[0].hid
					this.carName = res.data.list[0].styles[0].name
					
					this.dea_is_show =  res.data.list[0].styles[0].dea_is_show
					
					
					res.data.list[0].styles.map((item, index) => {
						
						item.isSelected = 0
						if(index == 0) {
							item.isSelected = 1
						}
					})
					this.carList = res.data.list[0].styles
					this.onGetLocationEvent()
					uni.hideLoading()
					
				})
			},
			
			tabChange(val) {
				console.log(val, "33333")
				this.isActive = val.brand_id
				
				this.brand_id = val.brand_id
				
				
				//车
				this.carList = val.styles
				this.carHid = this.carList[0].hid
				this.carName = this.carList[0].name
				this.dea_is_show =  this.carList[0].dea_is_show
				this.mount_log_hid = this.carList[0].mount_log_hid
				this.special_hid = this.carList[0].special_hid
				this.carList.map((item, index) => {
					item.isSelected = 0
					if(index == 0) {
						item.isSelected = 1
					}
				})
				if(this.isLocation) {
					if(this.dea_is_show) {
						this.getDealer()
					}
				}
				uni.pageScrollTo({
				  scrollTop: 0,
				  duration: 0
				})
			},
			
			// 获取经纬度 
			onGetLocationEvent() {
				let _this = this
					//用户授权经纬度
				return	new Promise((resolve, reject) => {
					tt.getLocation({
					success(res) {
						console.log(res, "经纬度")
						_this.loc_lng = res.longitude;
						_this.loc_lat = res.latitude;
						_this.isLocation = true
						resolve('success')
						 _this.getProvince()
						 
						 _this.provincename = ''
						 // _this.getDealer()
						
					},
					fail(err) {
						
						_this.isLocation = false
						resolve('fail')
						// _this.getDealer()
						_this.getProvince()
						_this.dealerName = '请选择意向经销商'
					},
					});
				})
			},
			getProvince (){
				request.http(
				{
					url: Api.province_city,
					type: 'GET',
					header: {
						// // 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token')
					},
					data: {
						loc_lng: this.loc_lng,
						loc_lat: this.loc_lat,
						car_style_hid: this.carHid
					},
					}).then(result=>{
						console.log(result, "省份城市")
						this.newProvinceCityList = result.data.list
						let _privateList = this.newProvinceCityList 
						let _cityList = _privateList[0].citys
						this.regionList = [_privateList, _cityList]
						this.province_id = _privateList[0].hid
						this.city_id = _privateList[0].citys[0].hid
						if(this.isLocation) {
							this.getDealer()
							this.cityname =_privateList[0].citys[0].name
						}
						uni.hideLoading()
					})
			},
			regionListChange ({detail}){
				console.log('确定')
				this.provinceCityIndex = [detail.value[0],detail.value[1]]
				this.province_id = this.regionList[0][detail.value[0]].hid
				this.city_id =  this.regionList[1][detail.value[1]].hid
				this.cityname = this.regionList[1][detail.value[1]].name
				this.provincename = ''
				this.getDealer()
				this.isLocation = true
			},
			// 列更新事件
			async regionListColumnchange({ detail: { column, value } }) {
				console.log("3333")
				console.log(this.regionList)
				let citylist = []
				//省份更新
				if(column == 0){
					citylist = this.newProvinceCityList[value].citys
					this.regionList = [this.newProvinceCityList, citylist]
				}
			},
			cancelRegion() {
				console.log("取消")
				let citylist = this.newProvinceCityList[this.provinceCityIndex[0]].citys
				this.regionList = [this.newProvinceCityList, citylist]
			},
			// 获取经销商
			getDealer () {
				
				request.http(
				{
					url: Api.dealer_list,
					type: 'GET',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token'),
					},
					data: {
						city_id: this.city_id,
						loc_lng: this.loc_lng,
						loc_lat: this.loc_lat,
						car_style_hid: this.carHid
					},
					}).then(result=>{
						result.data.list.map((item, index) => {
							item.isSelected = 0
							if(index == 0) {
								item.isSelected = 1
							}
						})
						
						this.dealerList = result.data.list
						
						
						if(this.dealerList.length > 0) {
							this.dealerName = result.data.list[0].name
							this.dealerId = result.data.list[0].hid
						} else {
							this.dealerName = "暂无经销商"
							this.dealerId = ''
						}
					})
			},
			//选择车系
			selectCar(val, index) {
				console.log(index, "index")
				this.toView = 'sv'+ val.hid
				this.scrollLeft = index * 200
				console.log(this.scrollLeft, "scrollLeft")
				this.carList.map(item => {
					if(val.hid == item.hid){
						item.isSelected = 1
					} else {
						item.isSelected = 0
					}
				})
				this.carHid = val.hid
				this.carName = val.name
				this.imageUrl = val.coupon_pic
				this.dea_is_show = val.dea_is_show
				this.mount_log_hid =val.mount_log_hid
				this.special_hid = val.special_hid
				if(this.isLocation) {
					if(this.dea_is_show) {
						this.getDealer()
					}
				}
				
				this.$refs.carpop.close()

			},
			//选择经销商
			selectDealer(val) {
				this.isLocation = true
				this.dealerList.map(item => {
					if(val.hid == item.hid){
						item.isSelected = 1
					} else {
						item.isSelected = 0
					}
				})
				
				this.dealerId = val.hid
				this.dealerName = val.name
				this.$refs.popup.close()
			
			},
			// 获取手机号
			onGetPhoneNumbers(e) {
			if(e.detail.errNo != 10200) {
				request.http(
				{
					url: Api.decrypt_phone,
					type: 'POST',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token'),
					},
					data: {
						encrypted_data: e.detail.encryptedData,
						iv: e.detail.iv,
					},
					}).then(result=>{
						this.phone = result.data.encode_phone
						this.phone_sign = result.data.phone_sign
						uni.setStorageSync('empower_phone', this.phone)
						uni.setStorageSync('phone_sign', this.phone_sign)

					})
				}	
			},
			onGetPhoneNumber (e) {
				console.log(e, '3')
				this.isShow = true
			
				
				if(e.detail.errNo != 10200) {
					request.http(
					{
						url: Api.decrypt_phone,
						type: 'POST',
						header: {
							// 'content-type': 'application/x-www-form-urlencoded',
							'token':uni.getStorageSync('token'),
						},
						data: {
							encrypted_data: e.detail.encryptedData,
							iv: e.detail.iv,
						},
						}).then(result=>{
							this.phone = result.data.encode_phone
							this.phone_sign = result.data.phone_sign
							uni.setStorageSync('empower_phone', this.phone)
							uni.setStorageSync('phone_sign', this.phone_sign)
							
							
							this.formClick(1)
							// if(this.isEmpower) {
							// 	this.formClick(1)
							// }
							
						})
				} else {
					console.log('拒绝')
					this.isEmpower = false
					// this.formClick()
				}
				
			},
			
			inputChange (e) {
				console.log(e, '手机号')
				if(this.phone.length == 11){
					this.isShow = false
					this.phone_sign = ''
				} else if(this.phone.length == 0){
					this.isShow = true
					this.phone_sign = ''
				}
				
			},
			showCar() {
				this.$refs.carpop.open('bottom')
			},
			showModal () {
				if(this.dealerList.length != 0) {
					this.$refs.popup.open('bottom')
				}
			},
			closeModal () {
				this.$refs.popup.close()
				this.$refs.carpop.close()
			},
			
			clickForm() {
				this.formClick(1)
			},
			
			
			formClick (val) {
			if(val != 1) {
				console.log('不走')
				return
			}
				
				this.isEmpower = false
		
			if(this.provincename == '请选择购车城市') {
				uni.showToast({
					title:'请选择购车城市',
					icon: "none"
				})
				return
			}
			
			if(this.dea_is_show  && this.dealerId == '') {
				uni.showToast({
					title:'请选择意向经销商',
					icon: "none"
				})
				return
			}
			if(this.phone == '') {
				uni.showToast({
					title:'请输入手机号',
					icon: "none"
				})
				return
			}
			
			
			if( !this.isShow && this.sms_code == '') {
				uni.showToast({
					title:'请输入验证码',
					icon: "none"
				})
				return
			}
			let obj = {
				adid: this.reqArgs.adid,
				creativeid: this.reqArgs.creativeid,
				creativetype: this.reqArgs.creativetype,
				clickid: this.reqArgs.clickid,
			}
			console.log(this.carHid, "车系id")
			console.log(this.mount_log_hid, "mount_log_hid111")
			// this.isDots = true
			request.http(
			{
				url: Api.leave_clue,
				type: 'POST',
				header: {
					// 'content-type': 'application/x-www-form-urlencoded',
					'token':uni.getStorageSync('token'),
				},
				data: {
					cate: 6,
					province_id: this.province_id,
					city_id: this.city_id,
					style_hid: this.carHid,
					dea_hid: this.dealerId,
					phone: this.phone_sign == '' ? this.phone : '' ,
					sms_code: this.sms_code,
					mount_log_hid: this.mount_log_hid ,
					phone_cate: this.isShow ? 1 : 2,
					phone_sign: this.phone_sign,
					special_hid: this.special_hid,
					dy_ad: obj
				},
				}).then(result=>{
					if(result.data.is_send_sms) {
						console.log('成功')
						deliverClickCallback("form" , this.reqArgs)
					}
					// this.$refs.modalPopup.open('center')
					uni.navigateTo({
						url:`/subPackage/successPage/quotation?city_id=${this.city_id}&style_hid=${this.carHid}&city_name=${this.cityname}&special_hid=${result.data.special_hid}&douyin_name=${result.data.nickname}&douyin_num=${result.data.account_num}&phone=${result.data.phone}&is_send_sms=${result.data.is_send_sms}&kol_id=${result.data.kol_id}`
					})
					this.isEmpower = false
					this.sms_code =''
					// this.isDots = false
				}).catch(err => {
					// this.isDots = false
					console.log(err, "333")
				})
			},
			
			
			jumpHome () {
				this.$refs.modalPopup.close()
		
			},
			getSMS(){
				if(this.phone == '') {
					uni.showToast({
						title:'请输入手机号',
						icon: "none"
					})
					return
				}
				
				request.http(
				{
					url: Api.getCode,
					type: 'POST',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						//  'token':uni.getStorageSync('token'),
					},
					data: {
						cate: 6,
						phone: this.phone
						},
					}).then(result=>{
						this.setTime()
						this.isSMS = true
					})
			},
			setTime(val) {
				   let that=this; 
				   
					if(this.countdown==0){
					this.countdown=60;
					clearTimeout(that.timeClock)
					this.isSMS = false
					}else{
					this.countdown--;
					this.timeClock=setTimeout(()=>{
					that.setTime();   
					},1000)
				   }
			},
			jumpAgreement() {
				uni.navigateTo({
					url:'/subPackage/personal/agreement'
				}) 
			},
			//点击车
			checkItem(val) {
				
				
				this.carList.map(item => {
					if(val.hid == item.hid){
						item.isSelected = 1
					} else {
						item.isSelected = 0
					}
				})
				this.carHid = val.hid
				this.carName = val.name
				this.imageUrl = val.coupon_pic
				this.dea_is_show = val.dea_is_show
				this.mount_log_hid =val.mount_log_hid
				this.special_hid = val.special_hid
				if(this.isLocation) {
					if(this.dea_is_show) {
						this.getDealer()
					}
				}
				
			},
			reloading() {
				this.networkConnected = false
				
				uni.showLoading({
					title: '加载中...',
					duration: 3000,
					success:() =>{
					 
						const currentPages = getCurrentPages();
						console.log(currentPages, 'currentPages')
						uni.redirectTo({
							url: currentPages[currentPages.length - 1]['$page']['fullPath'],
						});		
					console.log(currentPages[currentPages.length - 1]['$page']['fullPath'], '路径2')
					}
					
				})
			
			}
			 
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(180deg, #009CFC 0%, #0061F4 100%);
		padding: 0 30rpx;
		box-sizing: border-box;
		.top-box {
			width: 100%;
			height: 332rpx;
			display: flex;
			// justify-content: space-between;
			padding:40rpx 5rpx ;
			box-sizing: border-box;
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 0;
				box-sizing: border-box;
				.title-img {
					width: 210rpx;
					height: 64rpx;
				}
				.tips{
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.time-box {
					width: 228rpx;
					height: 40rpx;
					background-image: url(../../static/image/shixiao.png);
					background-size: 100% 100%;
					position: relative;
					.time{
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						position: absolute;
						top:0;
						left:105rpx;
					}
				}
			}
			.right {
				image{
					width: 200rpx;
					height: 248rpx;
				}
			}
		}
		.white {
			background: #fff;
			border-radius: 16rpx;
			height: 1050rpx;
			position: relative;
			.btn-box {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-top: 41rpx;
				padding: 0 60rpx ;
				box-sizing: border-box;
				position: absolute;
				bottom: 20rpx;
				left: 0;
				.btn-price {
					width:100%;
					height: 87rpx;
					background: #3075FE;
					border-radius: 4rpx;
					font-weight: 400;
					color: #FFFFFF;
					font-size: 29rpx;
					line-height: 80rpx;
					margin-bottom: 21rpx;
					line-height: 87rpx;
				}
				.tips-text {
					font-weight: 400;
					color: #6E7175;
					font-size: 22rpx;
					display: flex;
				}
			}
		}
		.select-item {
			width: 100%;
			padding: 0 29rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			
			.brand-list {
				width: 100%;
				height: 90rpx;
				background: #fff;
				display: flex;
				align-items: center;
				overflow-y: hidden;
				overflow-x: auto;
				margin-left: -15rpx;
				.tab-item {
					flex-shrink: 0;
					padding: 20rpx;
					font-weight: 400;
					color: #6E7175;
					font-size: 32rpx;
				}
				.active {
					color: #222526;
					font-size: 36rpx;
					font-weight: 600;
					position: relative;
					&::before {
						content: "";
						position: absolute;
						bottom: 14rpx;
						left: 50%;
						transform: translate(-50%, 0);
						width: 29rpx;
						height:6rpx ;
						background-image: url(../../static/image/active.png);
						background-size: 100% 100%;
					}
				}
				
			}
			
			.scroll-box {
				width: 100%;
				height: 220rpx;
				display: flex;
				margin-top: 18rpx;
				
				.scroll-list, .scroll-short {
					background: #F6F7FC;
					width: 91.5%;
					white-space: nowrap;
					border-radius:8rpx 0rpx 0rpx 0rpx;
					.car-item {
						
						display: inline-block;
						width: 195rpx;
						height: 195rpx;
						position: relative;
						// padding: 10rpx 10rpx 10rpx 0rpx;
						margin: 10rpx 0rpx 10rpx 10rpx;
						// box-sizing: border-box;
						 // background: #F6F7FC;
						 background: #fff;
						.check {
							width: 43rpx;
							height: 43rpx;
							position: absolute;
							top: 21rpx;
							right: 16rpx;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.img-title {
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							background: #fff;
							border-radius: 7rpx;
							img{
								width: 181rpx;
								height: 120rpx;
							}
							.title {
								width: 175rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #222526;
								overflow:hidden;
								text-overflow:ellipsis;
								white-space:nowrap;
								text-align: center;
								margin-top: -10rpx;
							}
						}					
					}
				}
				
				.scroll-short {
					background: #F6F7FC;
					width: 100%;
					white-space: nowrap;
				}
			
				.all-car {									
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 58rpx;
					height: 220rpx;
					background: #F6F7FC;
					border-radius:0rpx 8rpx 0rpx 0rpx;
					img {
						width: 18rpx;
						height: 18rpx;
					}
					.all {
						height: 110rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #222526;
						writing-mode: tb-rl;
						text-align: center;
						 letter-spacing: 7rpx;
					}
				}
			}
			
		
			
			.guding {
				width: 100%;
				height: 116rpx;
				display: flex;
				background: #F6F7FC;
				border-radius:0rpx 0rpx 8rpx 8rpx;
				.item-jia:last-child {
					border-right: none;
				}
				.item-jia {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 11rpx 0 22rpx 0;
					box-sizing: border-box;
					justify-content: space-between;
					border-right: 1rpx solid #E6E8F2;
					.top-name {
						font-weight: 400;
						font-size: 28rpx;
						color: #6E7175;
					}
					.x {
						font-weight: 500;
						font-size: 32rpx;
						color: #FF3322;
					}
				}
			}
	
			.item {
				display: flex;
				width: 100%;
				height: 98rpx;
				align-items: center;
				border-bottom: 1rpx solid #DCDDE0;
		
				
				.left, .middle {
					
					font-weight: 400;
					color: #222526;
					font-size: 29rpx;
				}
				.left {
					width: 116rpx;
					color:#6E7175;
					font-size: 28rpx;
				}
				.middle {
					flex:1 ;
					margin-left: 47rpx;
					overflow: hidden;
					text-overflow:ellipsis;    
					white-space: nowrap;
				}
				.right{ 
					img {
						width: 43rpx;
						height: 43rpx;
						margin-top: 25rpx;
					}
					.btn {
						font-weight: 400;
						color: #3075FE;
						font-size: 29rpx;
					
						background: none;
					
					}
					button::after{ border: none; }
				}
			}
		}
		
		
		.dea-box {
			width: 100%;
			height: 942rpx;
			overflow-y: auto;
			background: #FFFFFF;
			padding:0 29rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.cancel-title {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 29rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #DCDDE0;
		
				.cancel {
					font-weight: 400;
					color: #222526;
					font-size: 29rpx;
				}
				.title {
					flex: 1;
					text-align: center;
					font-weight: 500;
					color: #222526;
					font-size: 33rpx;
				}
			}
			.list-box {
				width: 100%;
				overflow-y: auto;
				.list-item {
					width: 100%;
					padding-top: 20rpx;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					
					position: relative;
					
					.icon {
						position:absolute;
						top:40%;
						right: 20rpx;
						transform: translate(0, -40%);
					}
					.title {
						font-weight: 500;
						color: #222526;
						font-size: 29rpx;
						margin-bottom: 15rpx;
					}
					.address {
						display: flex;
						font-weight: 400;
						font-size: 22rpx;
						color: #6E7175;
						border-bottom: 2rpx solid #DCDDE0;
						padding-bottom:23rpx ;
						padding-right:100rpx;
						.gang {
							margin: 0 10rpx;
						}
						.distance {
							// display: flex;
							// padding-right:100rpx;
							
						}
						
					}
				}
			}
			
		}
		
		
		.modal {
			width: 551rpx;
			background: #fff;
			border-radius: 7rpx;
			padding: 28rpx 0 53rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.title {
				font-weight: 500;
				color: #021615;
				font-size: 33rpx;
				margin-bottom: 28rpx;
			}
			.content{
				font-weight: 400;
				color: #021615;
				font-size: 29rpx;
				margin-bottom: 57rpx;
			}
			.btn {
				width: 196rpx;
				height: 72rpx;
				background: #3075FE;
				border-radius: 4rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 27rpx;
				line-height: 72rpx;
				text-align: center;
			}
		}
		
		.mask {
			width: 100%;
			height: 100vh;
			background: rgba(0,0,0,0.4);
			position: fixed;
			top: 0;
			left: 0;
			.net-box {
				width: 543rpx;
				height: 598rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				img {
					width: 299rpx;
				}
				.text {
					font-size: 29rpx;
					font-weight: 400;
					color: #021615;
					margin-bottom: 57rpx;
				}
				.btn {
					width: 217rpx;
					height: 72rpx;
					background: #3075FE;
					border-radius: 4rpx;
					font-size: 27rpx;
					line-height: 72rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
		
	}
	
</style>


<style>	
	button::after {
	      border: none;
	}
</style>
